<template>
    <el-row v-loading="loading" type="flex" class="region-distribution">
        <ChartSaleDistribute class="flex-item chart-item" :data="tableData.data" />
        <TableSimple height="42vh" :tableData="tableData" class="flex-item table" />
    </el-row>
</template>

<script>
import ChartSaleDistribute from './chart-sale-distribute'
import TableSimple from '../user-data/table-simple'
import { subComponentMixin } from '@/mixins/client-analysis/'
export default {
  name: 'RegionDistribution',
  mixins: [subComponentMixin],
  components: { ChartSaleDistribute, TableSimple },
  data () {
    return {
      loading: true,
      tableData: {
        column: [
          {
            label: '省份',
            prop: 'province_name'
          },
          {
            label: '总出货量',
            prop: 'sale_quantity',
            sortable: true
          },
          {
            label: '智能出货量',
            prop: 'intel_sale_quantity',
            sortable: true
          },
          {
            label: '非智能出货量',
            prop: 'nonintel_sale_quantity',
            sortable: true
          },
          {
            label: '智能渗透率',
            prop: 'intel_ratio',
            sortable: true
          }
        ],
        data: []
      }
    }
  },
  created () {
    this.debounceGetData()
  },
  methods: {
    getData () {
      this._getIntelSaleRatioData()
    },
    async _getIntelSaleRatioData () {
      this.loading = true
      const { data: { data: { list = [] }, code } } = await this.$http
        .get(this.getApiUrl('dataanalysis_iot/sale/getDeviceProvinceSaleRate', false),
          {
            params: this.requestParams
          })
      this.loading = false
      if (code === 0) {
        this.tableData.data = list
      }
    }
  }
}
</script>
<style lang="scss" scoped>
    .region-distribution {
        .flex-item {
            flex: 1 0;
            &.table {
            flex-basis: 45%;
            }
            &.chart-item {
            flex-basis: 55%;
            }
        }
        .table ::v-deep {
          .el-table__row {
            td {
              padding: 6px
            }
          }
        }
    }
</style>
